<template>
	<view class="container">
		<l-file ref="lFile" @up-success="upSuccess"></l-file>
		<view class="top">
			<view class="tdmc u-m-l-30">
				<text>项目名称</text>
				<text class="right">{{model.name}}</text>
			</view>
			<view class="tdmc u-m-l-30" v-if="model.demand != undefined">
				<text>发布类型</text>
				<text class="right">{{model.demand.fblx}}</text>
			</view>		
			<view class="tdmc u-m-l-30" v-if="model.intention != undefined">
				<text>发布地域</text>
				<text class="right">{{model.intention.region}}</text>
			</view>
			<view class="tdmc u-m-l-30" v-if="model.demand != undefined">
				<text>发布时效</text>
				<text class="right">{{model.demand.fbsx}}</text>
			</view>
			<!-- <view class="tdmc u-m-l-30" v-if="model.demand != undefined">
				<text>发布内容</text>
				<text class="right">{{model.demand.fbnr}}</text>
			</view>
			<view class="u-m-l-30 tdmc" v-if="model.demand != undefined">
				<text>图片</text>
			</view>
			<view class="u-m-l-30" v-if="model.demand != undefined">
				<view class="u-flex u-wrap right">
					<image style="width:200rpx;height:200rpx;margin-right:20rpx;margin-bottom:20rpx;" :src="getImgUrl(item)"  @tap="previewImage(index,returnArrImg(model.demand.imgUrl))" v-for="(item,index) in returnArrImg(model.demand.imgUrl)"></image>
				</view>
			</view> -->
			<view class="u-m-l-30 tdmc u-flex" v-if="model.demand != undefined">
				<text>打赏</text>
				<view class="right u-flex u-row-between" style="width:460rpx;">{{model.demand.dsje}}智汇币 <view v-if="dsName != ''">{{dsName}}</view><view class="btn" v-if="dsName == ''"  @click="showDs = true">打赏</view></view>
			</view>
			<view class="u-m-l-30 tdmc" v-if="model.demand != undefined">
				<text>活动简介</text>
				<text class="right">{{model.demand.jdsm}}</text>
			</view>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		</view>
		<view class="u-m-l-30 u-m-t-30">
			<view @click="selectShow(1)" class="u-flex u-row-between tdcy">
				<view class="u-font-30" style="font-weight: bold;">
					文件
				</view>
				<view class="u-flex u-col-center">
					<view class="sc" style="margin-right: 30upx;">
						<image style="" src="../../../static/img/jh.png" mode=""></image>
						<text @click="onUpload(false)">上传</text>
					</view>
					<u-icon name="arrow-down" style="margin-right: 20upx;" @click="selectShow(1,true)" v-if="!flagList[1]"></u-icon>
					<u-icon name="arrow-up" style="margin-right: 20upx;" @click="selectShow(1,false)" v-if="flagList[1]"></u-icon>
				</view>
			</view>
		
		</view>
		<view class="u-m-b-60" v-if="flagList[1]">			
			<block v-for="(item, index) in model.files" :key="item.id">
				<u-swipe-action
					:show="item.show"
					:index="index"
					v-if="$store.state.userInfo.id == item.userId"
					@click="delFiles"
					@open="openFiles"
					:options="options"
					style="width: 100%;"
				>
					<view class="f-list u-flex u-p-t-20 u-p-b-20 u-col-center" style="display: flex;justify-content: space-between;">
						<view class="qylg"><image style="width: 64rpx; height: 64rpx;" src="../../../static/img/file.png" mode=""></image></view>
						<view class="f-item" style="flex: 1;" @click="onOpenDoc(item.path)">
							<view class="u-font-34">
								<text style="display:block;width:400rpx;" class="u-line-1">{{ item.oldName }}</text>
							</view>
							<view class="title u-flex u-m-t-12" style="width: 80%;">
								<text class="name">{{ item.userName }}</text>
								<view class="u-flex u-row-between" style="width: 100%;">
									<text class="rq">{{ item.uploadTime.substr(0, 10) }}</text>
									<text class="wjdx">{{ item.size / 1000 + 'KB' }}</text>
								</view>
							</view>
						</view>
						<view class="xz" @click="onDown(item.path)" style="margin-right: 20upx;">下载</view>
					</view>
				</u-swipe-action>
				<view class="f-list u-flex u-p-t-20 u-p-b-20 u-col-center" v-else style="display: flex;justify-content: space-between;">
					<view class="qylg "><image style="width: 64rpx; height: 64rpx;" src="../../../static/img/file.png" mode=""></image></view>
					<view class="f-item " style="flex: 1;" @click="onOpenDoc(item.path)">
						<view class="u-font-34">
							<text style="display:block;width:400rpx;" class="u-line-1">{{ item.oldName }}</text>
						</view>
						<view class="title u-flex u-m-t-12" style="width: 80%;">
							<text class="name">{{ item.userName }}</text>
							<view class="u-flex u-row-between" style="width: 100%;">
								<text class="rq">{{ item.uploadTime.substr(0, 10) }}</text>
								<text class="wjdx">{{ item.size / 1000 + 'KB' }}</text>
							</view>
						</view>
					</view>
					<view class="xz" @click="onDown(item.path)" style="margin-right: 20upx;">下载</view>
				</view>
			</block>
		</view>
		<u-select mode="single-column" value-name="id" label-name="username" :list="model.users" v-model="showDs" @confirm="confirm"></u-select>
	</view>
</template>

<script>
import lFile from '@/components/l-file/l-file.vue'
	export default {
		components: {lFile},	
		data() {
			return {
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
				dsName:'',
				teamList:[],
				showDs:false,
				localPath: '',
				baseUrl:this.$mConfig.baseUrl,
				flagList: [false, false, false, false, false, false],
				id: 2,
				toggle: false,
				showHeight: 300,
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				bjxm: "../../static/homepage/xmkk.png",
				list: [],
				filelist:[],
				model:{
					files:[],
					wisdomInformation:{},
				}
			}
		},
		onLoad(options){
			if(options.id){
				this.id = options.id;
			}
			this.initPage(this.id);
		},
		methods: {
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.courses[index].show = true
				this.courses.map((val, idx) => {
					if (index != idx) this.courses[idx].show = false
				})
			},
			delFiles(index) {
				var that = this
				uni.showModal({
					content: '删除该文件',
					success(res) {
						if (res.confirm) that.deleteFileAgrees(index)
					}
				})
			},
			async deleteFileAgrees(index) {
				let { code } = await this.$apis.deleteFileAgree({ id: this.model.files[index].id })
				if (code == 200) {
					this.model.files.splice(index, 1)
				}
			},
			async confirm(e) {
				let userId = '';
				e.map((val, index) => {
					userId = val.value;
					this.dsName = val.label;
				});
				if(userId){
					let resutl =  await this.$apis.chooseBestAnswer({id:this.id,userId:userId});
					if(resutl.code == 200){
						this.initPage(this.id);
						uni.showToast({
							title:"打赏操作成功"
						})
					}
				}
			},
			returnArrImg(files){
				if(files.indexOf(',') === -1){
					return files.split(',');
				}else{
					return [files]
				}
			},
			previewImage(index,files) { //预览图片
				let imgs = files;					
				let urls = [];
				for(var i in imgs){
					urls.push(this.$mConfig.baseUrl + imgs[i]);
				}
				console.log(urls);
				uni.previewImage({
					current:index,
					urls: urls
				});
			},
			selectShow(index, flag) {
				this.flagList[index] = !this.flagList[index]
				this.$forceUpdate();
				console.log('this.flagList', this.flagList)
			},
			getImgUrl(url) {
				return this.$mConfig.baseUrl + url;
			},
			onOpenDoc(file) {
				let url = this.$mConfig.baseUrl + file;
				/* 下载返回临时路径（退出应用失效） */
				this.$refs.lFile.download(url)
				.then(path=>{
					/* 预览 */
					this.$refs.lFile.open(path);
				});
			},			
			/* 保存 */
			onDown(file) {
				let url = this.$mConfig.baseUrl + file;
				this.$refs.lFile.download(url,'local')
				.then(path=>{
					this.localPath = path;
				}); 
			},			
			/* 上传 */
			onUpload(flag) { 
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					// nvue页面使用时请查阅nvue获取当前webview的api，当前示例为vue窗口
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					//非真实地址，记得更换,调试时ios有跨域，需要后端开启跨域并且接口地址不要使用http://localhost/
					url: this.$mConfig.baseUrl + "/notepad/saveFile",
					//默认file,上传文件的key
					name: 'file',
					// header: {'Authorization':'token'},
					//...其他参数
					formData: {
						'businessId': this.id,
						'isAgree': flag,
						'type': 7
					},
					header: {
						"X-requested-With": "XMLHttpRequest",
						"ZC-TOKEN": uni.getStorageSync('token')
					}
				});
			},
			upSuccess(res) {
				this.initPage(this.id);
			},
			loadFile(file){
				uni.downloadFile({
				  url: this.$mConfig.baseUrl+file,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			},
			// async initPage(id){
			// 	let result = await this.$apis.notebookInformation({id:id});
			// 	this.model = result.data;
			// }		
			async initPage(id) {
				let result = await this.$apis.summary({
					id: id,
					type:7
				});
				this.model = result.data;
				this.dsName = result.data.bestAnswerUser;
			},	
		},
	
	}
</script>

<style scoped lang="scss">
	.tdmc {
		line-height: 100rpx;
		width: 90%;
		margin-left: 5%;
	
		text {
			font-size: 30rpx;
			color: #0D1D36;
		}
	
		.right {
			position: absolute;
			left: 228rpx;
		}
	
		.jine {
			position: absolute;
			left: 228rpx;
			font-size: 30rpx;
			color: #AB61FF;
		}
	}
	
	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}
	
	.xmkk {
		width: 102rpx;
		height: 118rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;
	
		text {
			color: #888D99;
			font-size: 26rpx;
			line-height: 118rpx;
			margin-left: 27rpx;
		}
	}
	
	.xmfp {
		color: #0D1D36;
		font-weight: bold;
	}
	
	.xmfpxj {
		width: 690rpx;
		background: #F5F5F9;
		border-radius: 10rpx;
	
		.tubiao {
			color: #0D1D36;
			font-size: 30rpx;
		}
	
		.xhx {
			width: 100%;
			height: 1rpx;
			background-color: #CACEDB;
			margin-top: 20rpx;
		}
	}
	
	.qylg {
		width: 102rpx;
		height: 118rpx;
		background-size: 100% auto;
		background-position: 0 bottom;
		margin-top: 15rpx;
		overflow: hidden;
		text-align: center;

		display: flex;
		justify-content: center;
		align-items: center;
		text {
			color: #888D99;
			font-size: 26rpx;
			line-height: 35rpx;
		}
	}
	
	.title {
		display: flex;
		justify-content: space-between;
		padding-right:40rpx;
	}
	
	.tz {
		width: 68rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		height: 36rpx;
		background: #AB61FF;
		border-radius: 6rpx;
		margin-left: 20rpx;
	}
	
	.name {
		font-size: 30rpx;
		color: #0D1D36;
		font-weight: bold;
	}
	
	.explain {
		color: #888D99;
		font-size: 26rpx;
	}
	
	.fpblsz {
		width: 68rpx;
		height: 36rpx;
		border: 2rpx solid #4B9CFF;
		border-radius: 6rpx;
		margin-left: 10rpx;
		padding: 0 10upx;
	}
	
	.fpbl {
		position: absolute;
		left: 500rpx;
		display: flex;
		align-items: center;
	
		text {
			font-size: 24rpx;
			color: #4B9CFF;
		}
	
		.fpblsz {
			width: 68rpx;
			height: 36rpx;
			border: 2rpx solid #4B9CFF;
			border-radius: 6rpx;
			margin-left: 10rpx;
			padding: 0 10upx;
		}
	
		.bfh {
			font-size: 24rpx;
			margin-left: 15rpx;
		}
	}
	
	.ckqb {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #FF8F28;
		margin-top: 30rpx;
	}
	
	.xhx {
		width: 100%;
		height: 2rpx;
		background-color: #DADFED;
		margin-top: 34rpx;
	}
	
	.scxy {
		display: flex;
		align-items: center;
		width: 190rpx;
		height: 52rpx;
		border: 2rpx solid #AB61FF;
		border-radius: 26rpx;
		color: #AB61FF;
		font-size: 26rpx;
	
		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
			margin-left: 26rpx;
		}
	}
	
	.tdxy {
		width: 690rpx;
		height: 159rpx;
		background: #F5F5F9;
		border-radius: 20rpx;
	
		.word {
			display: flex;
			align-items: center;
	
			image {
				width: 41rpx;
				height: 37rpx;
			}
	
			text {
				color: #4B9CFF;
				font-size: 30rpx;
				margin-left: 16rpx;
			}
		}
	}
	
	.scsj {
		color: #0D1D36;
		font-size: 26rpx;
	}
	
	.sctime {
		display: flex;
		align-items: center;
		color: #888D99;
		font-size: 30rpx;
		margin-left: 20rpx;
	}
	
	.ty {
		width: 18rpx;
		height: 18rpx;
		background: #888D99;
		border-radius: 50%;
	}
	
	.xmjz {
		color: #888D99;
		font-size: 30rpx;
		margin-left: 20rpx;
	}
	
	
	.xx {
		width: 2rpx;
		height: 2rpx;
		border: 2rpx dashed #888D99;
		opacity: 0.5;
		margin-left: 7rpx;
	}
	
	
	.zxjz {
		color: #0D1D36;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 40rpx;
	}
	
	.tp {
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
		background-color: #F5F5F9;
		margin-left: 30rpx;
		margin-top: 24rpx;
	}
	
	.tyqk {
		color: #0D1D36;
		font-size: 26rpx;
	}
	
	.hekuai {
		color: #FFFFFF;
		font-size: 26rpx;
		width: 72rpx;
		height: 32rpx;
		background: #4F5A78;
		border-radius: 4rpx;
		text-align: center;
		line-height: 32rpx;
		margin-left: 22rpx;
	}
	
	.sd {
		width: 48rpx;
		height: 48rpx;
		margin-left: 341rpx;
	}
	
	.word {
		display: flex;
		align-items: center;
	
		image {
			width: 41rpx;
			height: 37rpx;
		}
	
		text {
			color: #4B9CFF;
			font-size: 30rpx;
			margin-left: 16rpx;
		}
	}
	
	.qymc {
		width: 102rpx;
		height: 118rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;
	
		text {
	
			color: #888D99;
			font-size: 20rpx;
			line-height: 118rpx;
			margin-left: 8rpx;
		}
	}
	
	.bzj {
		position: absolute;
		left: 550rpx;
		font-size: 36rpx;
		color: #FE5022;
	}
	
	.caozuo {
		width: 690rpx;
		height: 124rpx;
		background-color: #F5F5F9;
		margin-top: -10rpx;
	
		.baocun {
			width: 160rpx;
			height: 64rpx;
			background: #4B9CFF;
			border-radius: 10px;
			color: #FFFFFF;
			font-size: 30rpx;
			line-height: 64rpx;
		}
	
		.quxiao {
			width: 160rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			color: #888D99;
			font-size: 30rpx;
			line-height: 64rpx;
		}
	}
	
	.sc {
		display: flex;
		align-items: center;
		width: 136rpx;
		height: 52rpx;
		border: 2rpx solid #AB61FF;
		border-radius: 26rpx;
		color: #AB61FF;
		font-size: 26rpx;
	
		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
			margin-left: 26rpx;
		}
	}
	
	.qylg {
		width: 102rpx;
		height: 118rpx;
		background-size: 100% auto;
		background-position: 0 bottom;
		margin-left: 28rpx;
		margin-top: 15rpx;
	
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			color: #888D99;
			font-size: 26rpx;
			line-height: 35rpx;
			margin-left: 27rpx;
		}
	}
	
	.name {
		font-size: 28rpx;
		color: #4C9CFF;
	}
	
	.tz {
		width: 68rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		height: 36rpx;
		background: #AB61FF;
		border-radius: 6rpx;
		margin-left: 20rpx;
	}
	
	.xz {
		width: 114rpx;
		height: 50rpx;
		background: #4C9CFF;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		float: right;
	}
	
	.rq {
		font-size: 28rpx;
		color: #888E9A;;
	}
	
	.wjdx {
		font-size: 28rpx;
		color: #888E9A;
		margin-right: 20rpx;
	}
	
	.scroll-view_H {
		white-space: nowrap;
	
		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 100px;
		}
	
		.uni-bg-red {
			background: red;
		}
	
		.uni-bg-green {
			background: green;
		}
	
		.uni-bg-blue {
			background: blue;
		}
	}
	.swiper {height:500rpx;}
	.btn {
		width: 150rpx;
		height: 64rpx;
		background: #4C9CFF;
		border-radius: 20px;
		line-height: 64rpx;
		text-align: center;
		color: #fff;
		font-size: 13px;
	}
</style>
